<template>
    <el-container class="panel-block">
      <el-header class="sa-header">
        <div class="sa-flex sa-row-left content">
            <div class="merchant">
                <div class="name">店铺余额</div>
                <div class="amount">￥{{ money }}</div>
            </div>
            <div class="btn-groups">
                <el-button class="item" round plain @click="rechargeRow">充值</el-button>
                <el-button class="item" round plain @click="withdrawRow">提现</el-button>
            </div>
        </div>

        <div class="sa-titles sa-flex sa-row-between">
          <div class="label sa-flex">
            余额明细
          </div>
        </div>
        <el-tabs style="margin-top: 18px;" v-model="form.data.amount" @tab-change="getData">
            <el-tab-pane v-for="c in statusList" :key="c" :label="c.name" :name="c.type"></el-tab-pane>
        </el-tabs>
        <div class="sa-flex sa-row-between" style="width: 100%;">
            <el-form :inline="true" :model="form" >
                <el-form-item label="收支类型" >
                    <el-select
                        v-model="form.data.event"
                        placeholder="请选择"
                        clearable
                        style="width:100px"
                    >
                        <el-option label="提现" value="money_withdraw" />
                        <el-option label="充值" value="money_recharge" />
                        <el-option label="余额消费" value="money_consume" />
                        <el-option label="后台余额充值" value="admin_recharge" />
                        <el-option label="余额收益" value="money_income" />
                    </el-select>
                </el-form-item>
                <el-form-item label="对应单号" >
                    <el-input v-model="form.data.order_sn" style="width: 240px" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                        v-model="form.data.create_time"
                        type="datetimerange"
                        unlink-panels
                        range-separator="-"
                        start-placeholder="请选择"
                        end-placeholder="请选择"
                        :shortcuts="shortcuts"
                    />
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="primary" @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
      </el-header>
      <el-main class="sa-p-0" v-loading="loading">
        <el-table
          class="sa-table"
          height="100%"
          :data="table.data"
          @selection-change="changeSelection"
          @sort-change="fieldFilter"
          stripe
        >
          <template #empty>
            <sa-empty />
          </template>
          <!-- <el-table-column type="selection" width="48" align="center"></el-table-column> -->
          <el-table-column sortable="custom" prop="id" label="ID" min-width="100"> </el-table-column>
          <el-table-column label="收支类型" min-width="100">
            <template #default="scope">
              <div class="sa-table-line-1">
                {{ scope.row.event_text || '-' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="金额" min-width="100">
            <template #default="scope">
              <div class="sa-table-line-1">
                {{ scope.row.amount || '-' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="对应单号" min-width="100">
            <template #default="scope">
              <div class="sa-table-line-1">
                {{ scope.row.order ? scope.row.order.order_sn || '-' : '-' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" min-width="172">
            <template #default="scope">
              {{ scope.row.create_time || '-' }}
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <sa-view-bar>
        <template #right>
          <sa-pagination :pageData="pageData" @updateFn="getData" />
        </template>
      </sa-view-bar>
    </el-container>
  </template>
  <script>
    export default {
      name: 'shop.admin.earning.bill',
    };
  </script>
  <script setup>
    import { onMounted, reactive, ref, unref } from 'vue';
    import {api} from '../earning.service';
    import sheep from '@/sheep';
    import { ElMessageBox } from 'element-plus';
    import { useModal, usePagination } from '@/sheep/hooks';
    

    import { composeFilter } from '@/sheep/utils';
    import { cloneDeep } from 'lodash';
    import withdraw from './withdraw.vue';
    import rechareg from './rechareg.vue';

    const type = ref('all')
    const money = ref('0.00')
    const event = {
      money_withdraw:'提现',
      money_recharge:'充值',
      money_consume:'余额消费',
      admin_recharge:'后台余额充值',
      money_income:'余额收益',
    }

    const statusList = [
    {
      name: '全部',
      type: '',
    },
    {
      name: '收入',
      type: '>',
    },
    {
      name: '支出',
      type: '<',
    },
  ];

    const form = reactive({
        data:{
            type:'',
            source:'',
            status:'',
            orderNo:'',
            create_time:'',
            order_sn:'',
            amount:'',
        },
    });

    const { pageData } = usePagination();
  
    // 表格状态
    const table = reactive({
      data: [],
      page: 1,
      list_rows: 10,
      total: 0,
      order: '',
      sort: '',
      selected: [],
    });
    const loading = ref(false);
    const formatDate = (date) => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    };
    // 获取数据
    async function getData(page) {
      loading.value = true;
      if (page) pageData.page = page;
      let search = {

      }
      Object.entries(form.data).forEach(([key, value]) => {
          if (key === 'event' && value.length > 0) {
              search['event'] = [value, 'like'];
          }
          if (key === 'order_sn' && value.length > 0) {
              search['order.order_sn'] = [value, 'like'];
          }
          if (key === 'amount' && value.length > 0) {
              search['amount'] = ['0', value];
          }
          if (key === 'create_time' && value.length > 0) {
            console.log('value:',value);
              search.create_time = [formatDate(value[0]) + ' 00:00:00' + ' - ' + formatDate(value[1]) + ' 23:59:59', 'range'];
          }
      });

      search =  { search: JSON.stringify(search) };
      const bodydata = {
        page: pageData.page,
        list_rows: pageData.list_rows,
        ...search,
      }
      console.log('bodydata',bodydata)
      const { error, data } = await api.operations_list(bodydata);
      console.log('data',data)
      if (error === 0) {
        table.data = data.list.data;
        pageData.page = data.list.current_page;
        pageData.list_rows = data.list.per_page;
        pageData.total = data.list.total;
        money.value = data.money
      }
      loading.value = false;
    }
      
    // table 字段排序
    function fieldFilter({ prop, order }) {
      table.order = order == 'ascending' ? 'asc' : 'desc';
      table.sort = prop;
      getData();
    }
    // table 批量选择
    function changeSelection(row) {
      table.selected = row;
    }
    
    function onReset(){
        form.data = {
            type:'',
            source:'',
            status:'',
            orderNo:'',
            create_time:'',
        };
        getData();
    }

    function onSubmit(){
        table.data = [],
        table.page = 1,
        getData();
    }

    function rechargeRow(){
        useModal(
             rechareg,
            { title: '充值'},
            {
            confirm: () => {
                console.log('11111111');
            },
            },
        );
    }

    function withdrawRow(){
        console.log('2222')
        useModal(
            withdraw,
        { title: '提现'},
        {
          confirm: () => {
            console.log('11111111');
          },
        },
      );
    }

    onMounted(async () => {
      getData();
    });
  </script>
  <style lang="scss" scoped>

  .content{
    margin-top: 15px;
    width: 400px;
    height: 82px;
    background: #7D66F1;
    border-radius: 10px;
    padding-left:24px;
    padding-right: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .merchant{
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        .name{
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 400;
            font-size: 12px;
            color: #FFFFFF;
            line-height: 18px;
            text-align: left;
            font-style: normal;
        }
        .amount{
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 500;
            font-size: 18px;
            color: #FFFFFF;
            line-height: 27px;
            text-align: left;
            font-style: normal;
            margin-top: 12px;
        }
    }
    .btn-groups{
       height: 100%;
       display: flex;
       flex-direction: row;
       
       align-items: flex-end;
       margin-bottom: 20px;
       
       .item{
        border: 1px solid #fff !important;
      
        color: #fff !important;
        background-color: transparent;
       }
    }

  }
  .sa-titles{
    height:18px;
    margin-top: 37px;;
  }

 
  </style>